<!-- 
  一个单文件组件,就看成是一个页面
    - template 就相当于 wxml
    - script   就相当于 js
    - style    就相当于 wxss
    - json 配置的化, 需要去 pages.json 中具体页面的 style 下配置
 -->

<template>
  <view class="content">
    <!-- #ifdef H5 -->
    <image class="logo" src="/static/logo.png" />
    <!-- #endif -->
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <button @click="increment">{{ count }}</button>
  </view>

  <!-- 按钮也触发转发 -->
  <button open-type="share">转发</button>

  <view style="height: 2000px"></view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onShareAppMessage,
} from "@dcloudio/uni-app";
const title = ref("Hello");

const count = ref(1);

const increment = () => {
  // 判断是浏览器就加一,小程序就加二
  // if (navigator) {
  //   // 浏览器环境
  //   count.value++;
  // } else {
  //   count.value += 2;
  // }

  // #ifdef H5
  count.value++;
  // #endif

  // #ifdef MP-WEIXIN
  count.value += 2;
  // #endif
};

onMounted(() => {
  console.log("index onMounted");
});

onLoad((query) => {
  console.log("index onLoad", query);
});

/**
 * 处理页面下拉操作
 *  1. 需要开启允许下拉   enablePullRefresh
 */
onPullDownRefresh(() => {
  console.log("页面下拉了");
});

/**
 * 处理页面触底操作
 *  1. 可以配置 onReachBottomDistance 来控制滚动条距离底部的距离, 默认值为 50px
 */
onReachBottom(() => {
  console.log("页面触底了");
});

/**
 * 处理页面分享
 *  1. 只支持各个小程序
 *  2. 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
 *  3. 需要返回一个对象,来控制转发的内容
 */
onShareAppMessage((object) => {
  console.log("object", object);
  return {
    // 标题
    title: "震惊了",
    // 图片路径, 如果不设置的化,将默认用当前页面截图做为图片
    // imageUrl: "",
    // 转发路径,如果不设置的化,将默认使用当前页面路径.
    // path: "",
    promise: new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          // resolve 传递对象, 已该对象为准作为转发出去的内容.
          //  如果 promise 3秒内还未 resolve, 则使用默认的转发内容
          title: "Hello",
        });
      }, 4000);
    }),
  };
});
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;

  // #ifdef H5
  color: #8f8f94;
  // #endif

  // #ifdef MP-WEIXIN
  color: red;
  // #endif
}
</style>
